<template>
  <div class="box-card">
    <el-card>
      <template #header>
        <h1>挂号订单</h1>
      </template>
      <div class="content">
        <el-form :inline="true" label-width="100px">
          <el-form-item label="就诊人">
            <el-select v-model="patientId" placeholder="请选择就诊人" style="width: 200px" @change="getOrderList">
              <el-option label="全部就诊人" value=""/>
              <el-option v-for="item in patients" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="orderStatus" placeholder="请选择订单状态"  style="width: 200px" @change="getOrderList">
              <el-option v-for="item in orderStatusList" :key="item.status" :label="item.comment" :value="item.status">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table border :data="orderList">
          <el-table-column prop="reserveDate"  label="就诊时间" ></el-table-column>
          <el-table-column prop="hosname" label="医院" ></el-table-column>
          <el-table-column prop="depname" label="科室" ></el-table-column>
          <el-table-column prop="title" label="医生" ></el-table-column>
          <el-table-column prop="amount" label="服务费" ></el-table-column>
          <el-table-column prop="patientName" label="就诊人" ></el-table-column>
          <el-table-column prop="param.orderStatusString" label="订单状态" ></el-table-column>
          <el-table-column  label="操作" >
            <template #default="{row}">
              <el-button @click="goDetail(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper,->,sizes,total"
            @change="handlerPage"
            :total="totalPage"/>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">

import {onMounted, ref} from "vue";
import {reqGetOrderStatus, reqUserOrderLimit} from "@/api/user";
import {OrderStatus, UserOrder} from "@/api/user/type.ts";
import {useRouter} from "vue-router";
import {reqGetUser} from "@/api/hospital";
import {UserData} from "@/api/hospital/type.ts";
const $router = useRouter()
const pageNo = ref<number>(1);
const pageSize = ref<number>(10);
const totalPage = ref<number>(0)
const orderList = ref<Array<UserOrder>>([])

const patientId = ref<string>('')
const orderStatus = ref<string>('')

const patients = ref<UserData[]>([])
const orderStatusList = ref<OrderStatus[]>([])
onMounted(()=>{
  getOrderList()
  getAllPatient()
  getOrderStatusList()
})
const getOrderStatusList = async ()=>{
  const {data} = await reqGetOrderStatus()
  orderStatusList.value = data
}
//获取就诊人列表
const getAllPatient = async ()=>{
  const result = await reqGetUser()
  patients.value = result.data
}
//获取所有订单列表
const getOrderList = async ()=>{
  const result = await reqUserOrderLimit(pageNo.value,pageSize.value,patientId.value,orderStatus.value)
  orderList.value = result.data.records
  totalPage.value = result.data.total
}
//详情回调
const goDetail = (row:UserOrder)=>{
  $router.push({path:'/user/order',query:{orderId:row.id}})
}
const handlerPage = (page:number,size:number)=>{
  pageNo.value = page
  pageSize.value = size
  getOrderList()
}
</script>

<style scoped lang="scss">
.box-card{
  .content{
  }
}
</style>
